<template>
  <div class="box">
    <div class="login">
      <div class="lt">
        <div class="lt_t">
          <img src="../../assets/images/login_logo.png" alt="logo">
        </div>
        <div class="lt_b">
          <img src="../../assets/images/login_img.png">
        </div>
      </div>
      <div class="rt">
        <div class="rt_f">
          <div class="tit_1">圣东OA办公系统</div>
          <div class="tit_2">让工作更高效的完成</div>
          <div class="rt_l">
            <el-form class="login-form" :rules="loginformrules" ref="loginformref" :model="loginform">
              <el-form-item prop="userName">
                <el-input prefix-icon="el-icon-user" v-model="loginform.userName" placeholder="请输入账号名称"></el-input>
              </el-form-item>
              <el-form-item prop="passWord">
                <el-input prefix-icon="el-icon-key" type="passWord" v-model="loginform.passWord" placeholder="请输入登录密码"></el-input>
              </el-form-item>
              <el-form-item prop="validCode">
                <el-col :span="16">
                  <el-input prefix-icon="el-icon-coordinate" v-model="loginform.validCode" @keyup.native.enter="login" placeholder="请输入验证码"></el-input>
                </el-col>
                <el-col :span="8">
                  <img :src="captchaScr" class="validImg" @click="changeCaptcha">
                </el-col>
              </el-form-item>
              <span class="zhuce" @click="register">立即注册</span>
              <el-form-item class="login-btn">
                <el-button type="primary" round @click="login">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="login-buttom">
      <div class="footer">
        <div class="icp"><span @click="toicp" class="ipcword">赣ICP备18003168号-1</span></div>
        <div>Copyright © 2021 江西圣东智能科技有限公司 版权所有</div>
      </div>
    </div>
  </div>
</template>
<script>
import { Login, captcha } from '../../api/api'
import swal from 'sweetalert'
import _ from 'underscore'
export default {
  data () {
    return {
      loginform: {
        userName: '',
        passWord: '',
        // userName: 'hx',
        // passWord: '123456',
        validCode: ''
      },
      captchaScr: '',
      curTime: '',
      loginformrules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        passWord: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      }
    }
  },
  created () {
    this.curTime = new Date().getTime()
    this.getCaptcha()
  },
  methods: {
    login: _.debounce(function () {
      this.$refs.loginformref.validate((valid) => {
        if (!valid) return false
        if (!this.loginform.validCode) {
          swal('错误', '请输入验证码', 'error')
          return false
        }
        let params = {
          username: this.loginform.userName,
          password: this.loginform.passWord,
          veritycode: this.loginform.validCode,
          timeStamp: this.curTime + ''
        }
        Login(params)
          .then((res) => {
            // console.log(res)
            if (res.code == 200) {
              sessionStorage.setItem('token', res.data.token)
              this.$store.dispatch('getMemberInfo').then(res => {
                this.$router.replace({ path: '/home' })
              }).catch(err => {
                swal('错误', '用户身份信息获取失败', 'error').then(() => {
                  this.changeCaptcha()
                })
              })
            } else {
              swal('错误', res.message || '网络连接异常', 'error').then(() => {
                this.changeCaptcha()
              })
            }
          })
          .catch((err) => {
            swal('错误', '网络连接异常', 'error').then(() => {
              this.changeCaptcha()
            })
          })
      })
    }, 300),
    register () {
      this.$router.push({ path: '/register' })
    },
    // 获取验证码
    getCaptcha () {
      let params = {
        timeStamp: this.curTime
      }
      captcha(params).then(res => {
        this.captchaScr = res
      })
    },
    changeCaptcha () {
      this.loginform.validCode = ''
      this.curTime = new Date().getTime()
      this.getCaptcha()
    },
    toicp () {
      window.open('https://beian.miit.gov.cn')
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  min-width: 1200px;
  height: 100%;
  background: url('../../assets/images/login_bg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.login {
  width: 74.8%;
  min-width: 1000px;
  height: 750px;
  background: url('../../assets/images/login_form.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  .lt {
    width: 60%;
    height: 100%;
    .lt_t {
      width: 100%;
      height: 200px;
      img {
        width: 190px;
        height: 118px;
        margin-top: 56px;
        margin-left: 110px;
      }
    }
    .lt_b {
      width: 100%;
      height: 550px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        display: inline-block;
        width: 522px;
        height: 424px;
      }
    }
  }
  .rt {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    .rt_f {
      width: 80%;
      height: 60%;
      // background: red;
      .tit_1 {
        font-size: 38px;
        font-weight: bold;
      }
      .tit_2 {
        margin-top: 12px;
        color: #c0c4cc;
      }
      .rt_l {
        margin-top: 50px;
      }
    }
  }
}
.login-form {
  position: relative;
  top: 20px;
  // width: 485px;
  .validImg {
    width: 100%;
    height: 40px;
    cursor: pointer;
  }
}
.zhuce {
  color: rgb(64, 158, 255);
  cursor: pointer;
}
.zhuce:hover {
  text-decoration: underline;
}
.login-btn {
  margin-top: 30px;
  /deep/ .el-button {
    width: 80%;
  }
}
.login-buttom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  text-align: center;
  .icp {
    margin-top: 10px;
  }
  .ipcword:hover {
    cursor: pointer;
    text-decoration: underline;
  }
}
.rt_l /deep/ .el-input__inner {
  border: 0;
  border-bottom: 1px solid #c0c4cc;
  border-radius: 0;
}
</style>